<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-tiles"
	prefix="tiles"%>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/css/style.css">
<script language="JavaScript"
	src="<%=request.getContextPath()%>/js/util.js"></script>
<title><tiles:insert flush="false" attribute="title" /></title>
</head>
<body>
<f:view>
	<f:loadBundle basename="resource.bundle.messages" var="messages" />

	<h:form>
		<rich:panel header="#{messages['confirm.payment']}">
			<h:panelGrid>
				<h:outputText value="#{errorBean.errorMessage}" styleClass="error"></h:outputText>
			</h:panelGrid>
			<t:panelGrid columns="2" columnClasses="standardTable_ColumnLeft_20,standardTable_ColumnLeft_80" width="100%">
			
				
				<h:outputLabel for="product" value="#{messages['product.name']}" styleClass="standardText_Label" />
				<h:outputText id="product" value="#{registrationBean.membership.desc}"></h:outputText>
				
				<h:outputLabel for="amount" value="#{messages['amount']}" styleClass="standardText_Label" />
				<h:outputText id="amount" value="#{registrationBean.payAmt}">
					<f:convertNumber pattern="#,###,###,##0.00"/>
				</h:outputText>
				
				<h:outputText></h:outputText>
				<t:message for="name" styleClass="error"></t:message>
				<h:panelGroup>
					<h:outputText value="*" styleClass="standardText_Mandatory" />
					<h:outputLabel for="name" value="#{messages['credit.card.holder.name']}" styleClass="standardText_Label" />
				</h:panelGroup>
				<h:inputText id="name"  required="true" value="#{registrationBean.instruction.name}"></h:inputText>
				<h:panelGroup>
					<h:outputText value="*" styleClass="standardText_Mandatory" />
					<h:outputLabel value="#{messages['credit.card.no']}" styleClass="standardText_Label" />
				</h:panelGroup>
				<h:panelGroup>
					<t:panelGrid columns="4">
						<t:message for="no1" styleClass="error"></t:message>
						<t:message for="no2" styleClass="error"></t:message>
						<t:message for="no3" styleClass="error"></t:message>
						<t:message for="no4" styleClass="error"></t:message>
					
						<h:inputText id="no1" maxlength="4" size="4" required="true" value="#{registrationBean.instruction.cardNo1}"></h:inputText>
						<h:inputText id="no2" maxlength="4" size="4" required="true" value="#{registrationBean.instruction.cardNo2}"></h:inputText>
						<h:inputText id="no3" maxlength="4" size="4" required="true" value="#{registrationBean.instruction.cardNo3}"></h:inputText>
						<h:inputText id="no4" maxlength="4" size="4" required="true" value="#{registrationBean.instruction.cardNo4}"></h:inputText>
					</t:panelGrid>
				</h:panelGroup>
				
				<h:outputText></h:outputText>
			<t:message for="cvc" styleClass="error"></t:message>
				
				<h:panelGroup>
					<h:outputText value="*" styleClass="standardText_Mandatory" />
					<h:outputLabel for="cvc" value="#{messages['credit.card.cvc']}" styleClass="standardText_Label" />
				</h:panelGroup>
				<h:inputText id="cvc"  required="true" value="#{registrationBean.instruction.cvcNo}"></h:inputText>
				
				<h:outputText></h:outputText>
			<t:message for="type" styleClass="error"></t:message>
				
				<h:panelGroup>
					<h:outputText value="*" styleClass="standardText_Mandatory" />
					<h:outputLabel for="type" value="#{messages['credit.card.type']}" styleClass="standardText_Label" />
				</h:panelGroup>
				<h:inputText id="type"  required="true" value="#{registrationBean.instruction.cardType}"></h:inputText>
				
				<h:outputText></h:outputText>
			<t:message for="effectivedate" styleClass="error"></t:message>
				
				 <h:panelGroup>
			    	<h:outputText value="*" styleClass="standardText_Mandatory" />	
				    <h:outputLabel for="effectivedate" value="#{messages['expiry.date']}" styleClass="standardText_Label" />
	    		</h:panelGroup>
			    <h:panelGroup>
			    	<t:inputCalendar
			    	id="effectivedate"
						monthYearRowClass="yearMonthHeader" weekRowClass="weekHeader" 
						currentDayCellClass="currentDayCell" value="#{registrationBean.instruction.expDate}"
						renderAsPopup="true" popupTodayString="#{messages['popup.today']}"
						popupWeekString="#{messages['popup.week']}" popupDateFormat="dd/MM/yyyy"
						renderPopupButtonAsImage="true"
						styleClass="standardText" required="true">
			    </t:inputCalendar>
	    </h:panelGroup>
				
			</t:panelGrid>
		
		<rich:spacer height="30"></rich:spacer>
		<t:panelGrid columns="2">
			<t:commandButton styleClass="button" action="#{registrationBean.confirmPaymentAction}" value="#{messages['confirm']}"></t:commandButton>
			<t:commandButton styleClass="button" action="logout" value="#{messages['cancel']}" immediate="true"></t:commandButton>
		</t:panelGrid>
		</rich:panel>
	</h:form>
</f:view>
</body>
</html>
